<template>
  <div class="right">
    <span class="title">{{ title }}</span>
    <el-divider style="margin-top: 0px; user-select: none"> 分割线 </el-divider>
    <div class="main">
      <el-menu :default-active="defaultActive">
        <vet-menu
          v-for="item in menuList"
          :key="item.path"
          :item="item"
          :full-path="topPath"
        />
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts">
import VetMenu from "@/vet/vetMenu/index.vue";
import { defineComponent, watch, reactive, onMounted, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  components: { VetMenu },
  setup() {
    const route = useRoute();

    const state = reactive({
      title: "ikun动物园",
      defaultActive: "",
      menuList: [] as any,
      topPath: "",
    });

    const router2 = useRouter();

    // 监听路由变化
    watch(
      () => router2.currentRoute.value.path,
      () => {
        createMenu();
      }
    );

    // 页面刷新时，根据路由生成面包屑
    onMounted(() => {
      createMenu();
    });

    // 生成菜单
    const createMenu = () => {
      state.defaultActive = route.path;
      state.topPath = route.matched[0].path;
      state.menuList = route.matched[0].children;
    };

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style scoped>
.right {
  width: 240px;
  text-align: center;
  float: left;
  height: calc(100vh - 75px);
}
.main {
  height: calc(100vh - 75px);
  overflow-y: scroll;
}
.main::-webkit-scrollbar {
  display: none;
}
.title {
  line-height: 60px;
  font-size: 32px;
}
.el-menu {
  border-right: 0 !important;
}
</style>